<template>
    <div class="page_requiredDetail">
        <common-header :title="'基本信息编辑'">
            <span slot="overwrite-left"></span>
        </common-header>
        <div class="btn-save" @click="saveInfo">保存</div>
        <div class="pages-main" style="height: calc( 100vh - 45px)">
            <div class="item-info every-block-padding" style="border-bottom: 1px solid #f4f4f4;">
                <div class="item-item">
                    企业照片上传
                </div>
                <div v-show="enterInfo.cover">
                    <img :src="enterInfo.cover" @click="showPreviewPic = true"
                         style="height: 4.2rem;padding-top: 0.25rem;" alt=""/>
                </div>
                <div v-show="enterInfo.cover === ''">
                    <upload-Picture @pictureUrl="setUrl" :limit="1"></upload-Picture>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="企业名" v-model="enterInfo.name" placeholder="请填写企业名"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="注册资金（万元）" v-model="enterInfo.registeredcapital" placeholder="请填写注册资金"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="社会信用代码" v-model="enterInfo.criditecode" placeholder="请填写社会信用代码"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="法人姓名" v-model="enterInfo.legalname" placeholder="请填写法人姓名"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="法人身份证" v-model="enterInfo.legalidnumber" placeholder="请填写法人身份证"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="联系方式" v-model="enterInfo.contactphone" placeholder="请填写联系方式"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="经度" v-model="enterInfo.lat" placeholder="请填写经度"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="纬度" v-model="enterInfo.lon" placeholder="请填写纬度"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="具体地址" v-model="enterInfo.location" placeholder="请填写具体地址"></x-input>
                </div>
            </div>
            <div class="item-info">
                <div class="item-item">
                    <datetime title="成立时间" :min-year="1900" placeholder="请选择成立时间" v-model="establishtime"></datetime>
                </div>
            </div>
            <group class="chooseCategory">
                <popup-picker title="所属行业" ref="picker3" :data="list3" :columns="2" v-model="category"
                              show-name></popup-picker>
            </group>
            <div class="item-info">
                <div class="item-item">
                    <x-input title="主营业务" v-model="enterInfo.maincamp" placeholder="请填写主营业务"></x-input>
                </div>
            </div>
        </div>

        <div v-transfer-dom>
            <popup v-model="showPreviewPic" height="100%">
                <div class="popup1">
                    <img :src="enterInfo.cover"
                         style="width: 100%;position: absolute;top: 50%; transform: translateY(-50%);" alt=""/>
                    <div style="position: absolute;left:50%;transform: translateX(-50%);bottom: 20px;height:60px;
                     width: 5rem;text-align: center;" @click="deleteCoverPicture">
                        <img src="../../../static/images/del_03.png" alt=""/>
                    </div>
                </div>
            </popup>
        </div>

    </div>
</template>

<script>
    import {XInput, Selector, Datetime, PopupPicker, Group, Cell, Picker, TransferDom, Popup} from 'vux'
    import company from '../../services/company'
    import dateFormat from '../../filter/date'
    import uploadPicture from '../../components/uploadPicture';
    import {
        checkIDCard,
        checkCompanyName,
        checkCreditNumber,
        checkPhone,
        checkPhonenumber
    } from '../../utils/validate'

    export default {
        name: "requiredDetail",
        components: {
            XInput,
            Selector,
            Datetime,
            PopupPicker, Group, Cell, Picker,
            uploadPicture,
            TransferDom,
            Popup
        },
        data() {
            return {
                // enterInfo.categoryText
                showPreviewPic: false,
                id: this.$route.query.id,
                category: [],
                imageList: [],
                limit: 6,
                establishtime: '',
                enterInfo: {
                    name: '',
                    registeredcapital: '',
                    criditecode: '',
                    contactuser: '',
                    legalidnumber: '',
                    contactphone: '',
                    lat: '',
                    lon: '',
                    location: '',
                    establishtime: '',
                    category: '',
                    categoryText: '',
                    pcategory: '',
                    pcategoryText: '',
                    maincamp: '',
                    products: [],
                    taxpayercode: '',
                    productsite: '',
                    postalcode: '',
                    faxnumber: '',
                    enterpriseurl: '',
                    enterpriseemail: '',
                    totalstaff: '',
                    localstaff: '',
                    fundsubsidy: '',
                    usefundsubsidy: '',
                    legalname: '',
                    cover: '',
                    picurl: '',

                },
                categoryList: '',
                isUploadImg: false,
                list1: [],
                list2: [],
                list3: [],
                cID: '',
                dataChange: [],
            }
        },

        created() {

        },

        watch: {
            category(val) {
                let _text = this.$refs.picker3.getNameValues().split(' ')
                if (val) {
                    this.enterInfo.pcategory = val[0];
                    this.enterInfo.pcategoryText = _text[0];
                    if (val.length === 2) {
                        this.enterInfo.category = val[1];
                        this.enterInfo.categoryText = _text[1];
                    }
                }
            },
        },
        mounted() {
            this.getDetail()
            this.getCategoryOneList();
        },

        methods: {
            // 获取企业详情
            getDetail() {
                this.$store.dispatch('changeImgList', [])
                let _param = this.$tools.invokeUAF('enterprise/detail', {
                    id: this.id,
                })
                company.getEnterpriseDetail(_param).then(res => {
                    let data = res.data.data;
                    this.enterInfo = data;
                    this.establishtime = dateFormat(this.enterInfo.establishtime, 'YYYY-MM-DD');
                    this.category = [this.enterInfo.pcategory, this.enterInfo.category];
                    let imgList = [];
                    imgList.push({fileurl: this.enterInfo.cover})
                    this.$store.dispatch('changeImgList', imgList)
                })
            },

            // 获取企业类型
            getCategoryOneList() {
                let _param = this.$tools.invokeUAF('enterprise/getCategoryOneList', {})
                company.getCategoryOneList(_param).then(res => {
                    let data = res.data.data;
                    this.list1 = data;
                    this.cID = this.pcategory;
                    this.list1.forEach(item => {
                        let param = {
                            name: item.title,
                            value: String(item.id),
                            parent: String(item.parentId)
                        }
                        this.list3.push(param)
                        this.getCategoryTwoList(item.id)
                    })
                })
            },

            //获取所属行业
            getCategoryTwoList(id) {
                let _param = this.$tools.invokeUAF('enterprise/getCategoryTwoList', {
                    id: id,
                })
                let _list3 = [];
                company.getCategoryTwoList(_param).then(res => {
                    let data = res.data.data;
                    this.list2 = data;
                    this.list2.forEach(item => {
                        let param = {
                            name: item.title,
                            value: String(item.id),
                            parent: String(item.parentId)
                        }
                        _list3.push(param)
                    })
                    this.list3 = [...(this.list3), ..._list3]
                })
            },

            // 保存企业信息
            saveInfo() {

                let param = {
                    cover: '请上传企业照片',
                    name: '请输入企业名',
                    criditecode: '请输入社会信用代码',
                    contactuser: '请输入法人姓名',
                    legalidnumber: '请输入法人身份证',
                    contactphone: '请输入联系方式',
                    lat: '请输入经度',
                    lon: '请输入纬度',
                    location: '请输入具体地址',
                    establishtime: '请输入成立时间',
                    category: '请输入所属行业',
                    maincamp: '请输入主营业务',
                }

                for (let i in param) {
                    if (i === 'establishtime') {
                        if (!this.establishtime) {
                            this.$vux.toast.show({
                                text: '请输入成立时间',
                                type: 'text',
                                position: 'middle',
                            })
                            return;
                        }
                    } else {
                        if (!this.enterInfo[i]) {
                            this.$vux.toast.show({
                                text: param[i],
                                type: 'text',
                                position: 'middle',
                            })
                            return;
                        }
                    }

                }

                if (this.enterInfo.name) {
                    if (!checkCompanyName(this.enterInfo.name)) {
                        return;
                    }
                }

                if (this.enterInfo.criditecode) {
                    if (!checkCreditNumber(this.enterInfo.criditecode)) {
                        return;
                    }
                }

                if (this.enterInfo.legalidnumber) {
                    if (!checkIDCard(this.enterInfo.legalidnumber)) {
                        return;
                    }
                }

                if (this.enterInfo.contactphone) {
                    if (!checkPhonenumber(this.enterInfo.contactphone)) {
                        return;
                    }
                }

                let str = this.establishtime.replace(/-/g, '/')
                this.enterInfo.establishtime = new Date(str).getTime();
                let url = '';
                if (this.enterInfo.picurl.length) {
                    this.enterInfo.picurl.forEach(item => {
                        url = url ? url + ',' + item.fileurl : item.fileurl
                    })
                }
                this.enterInfo.picurl = url;
                let _param = this.$tools.invokeUAF('enterprise/getEnterpriseModify', {})
                company.getEnterpriseModify(_param, this.enterInfo).then(res => {
                    this.getDetail();
                    this.enterInfo.establishtime = dateFormat(this.enterInfo.establishtime, 'YYYY-MM-DD')
                })
            },

            // 删除图片
            deleteCoverPicture() {
                this.showPreviewPic = false;
                this.enterInfo.cover = '';
                this.$store.dispatch('changeImgList', [])
            },

            // 设置图片地址
            setUrl(ref) {
                this.enterInfo.cover = ref;
            }

        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_requiredDetail {
        .chooseCategory {
            .weui-cells:before {
                border-top: none !important;
            }
        }

        .item-info {
            background-color: #fff;
            line-height: 1rem;

            .item-item {
                border-bottom: 1px solid #f4f4f4;
            }

            .weui-cell {
                padding: 0 15px !important;
            }

            .weui-input {
                border: none !important;
                text-align: right !important;
            }
        }


        #uploadForm {
            height: 210px;
            position: relative;
        }

        #previewImage {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
        }

        #file {
            position: absolute;
            z-index: 99;
            opacity: 0;
            width: 100% !important;
            height: 100% !important;
        }

        .img_bc {
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
        }

        .img_close {
            position: absolute;
            z-index: 103;
            width: 23px;
            height: 23px;
            top: -10px;
            right: -10px;
            transform: rotate(130deg);
        }

        .m-credentials-img {
            margin-bottom: 10px;
        }
    }

    .weui-uploader__input-box, .weui-uploader__file {
        background-color: #fff;
        margin: 0;
        width: 30%;
        min-width: 30%;
        border: none;
        height: 3.146667rem;
        float: inherit;
        margin: 0 3.333% 3.333% 0;
    }

    .weui-uploader__input-box:before,
    .weui-uploader__input-box:after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #D9D9D9;
    }

    .weui-uploader__input-box:before {
        width: 2px;
        height: 39.5px;
    }

    .weui-uploader__input-box:after {
        width: 39.5px;
        height: 2px;
    }

    .weui-uploader__input-box:active {
        border-color: #999999;
    }

    .weui-uploader__input-box:active:before,
    .weui-uploader__input-box:active:after {
        background-color: #999999;
    }

    .weui-uploader__input {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .upmaxn {
        font-size: 12px;
        text-align: center;
        color: #b7b7b7;
        margin-top: 2.306667rem;
    }
</style>
